<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <script src="jquery-3.6.0.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 100%;
            height: 600px;
            margin: 0 auto;
        }

        .content-left {
            width: 15%;
            height: 600px;
            background-color: #4b525d;
            float: left;
        }

        .content-right {
            width: 85%;
            height: 600px;
            background-color: #4b525d;
            float: left;
        }

        .content-right iframe {
            width: 95%;
            height: 600px;
            background-color: white;
        }

        .left-title {
            width: 100%;
            height: 100px;
        }

        .left-title>a {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
            /*去掉a下默认下划线*/
            text-decoration: none;
        }

        /*分割线*/
        .seg {
            height: 1px;
            width: 100%;
            background-color: black;
        }

        .nav {
            /*上下5,左右0*/
            margin: 5px 0;
        }

        /*菜单项主标题*/
        .nav-title {
            margin: 0 auto;
            height: 40px;
            width: 100%;
            color: white;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        /*子标题内容区*/
        .nav-content {
            width: 100%;
            height: 100%;
            background-color: black;
        }

        /*子标题的样式*/
        .nav-content>a {
            display: block;
            width: 100%;
            height: 30px;
            color: #CCCCCC;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
        }

        /*子标题鼠标经过时的改变颜色*/
        .nav-content>a:hover {
            color: deepskyblue;
            background-color: #12040c;
        }

        /*内容区*/
        .content-right {
            font-size: 50px;
            line-height: 600px;
            text-align: center;
        }
    </style>

    <script>
        $(function () {

            //隐藏所有子标题
            $(".nav-menu").each(function () {
                $(this).children(".nav-content").hide();
            });

            //给菜单项中的所有主标题绑定事件
            $(".nav-title").each(function () {
                //获取点击当前标签下所有子标签
                var navConEle = $(this).parents(".nav-menu").children(".nav-content");

                //绑定点击事件,判断navConEle的display这个属性是否为none,时none的话时隐藏状态
                $(this).click(function () {
                    if (navConEle.css("display") != "none") {
                        //隐藏,传参数自带动画,单位为毫秒
                        navConEle.hide(300);
                    } else {
                        //显示,传参数自带动画,单位为毫秒
                        $(".nav-menu").each(function () {
                            $(this).children(".nav-content").hide(300);
                        });
                        navConEle.show(300);
                    }
                });
            });

            $(".nav-content>a").each(function () {
                $(this).click(function () {
                    $(".content-right").html($(this).html());
                });
            });

        });
    </script>
</head>

<body>
    <div class="content">
        <!--左侧导航栏-->
        <div class="content-left" >
            <div class="left-title">
                <a href="#">欢迎来到课题管理系统</a>
                <a href="#">请选择!</a>
            </div>

            <!--水平线-->
            <div class="seg"></div>

            <!--菜单栏导航-->
            <div class="nav">
                <!--每一个菜单栏项-->
                <div class="nav-content">
                    <a href="login" target="iframe">管理员登录</a>
                    <a href="userLogin" target="iframe">研究生登录</a>
                </div>

            </div>

            <!--水平线-->
            <div class="seg"></div>

        </div>

        <!--右侧内容区-->
        <div class="content-right">
            <iframe src="userLogin" frameborder="0" name="iframe"></iframe>
        </div>
    </div>
</body>

</html>